<template>
  <div class="app-container">
    <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
      :model="formData" :rules="rules" size="medium" label-width="120px">
      <h2 style="text-align: center">设备授权操作人员</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="设备名称" prop="deviceId">
            <el-select v-if="!($route.query.isInfo || isInfo)" filterable v-model="formData.deviceId"
              placeholder="请选择设备名称" clearable @change="changeDevice" :style="{ width: '100%' }">
              <el-option v-for="(item, index) in deviceOptions" :key="index" :label="item.deviceName"
                :value="item.deviceId" :disabled="item.disabled">
                <span style="float: left">{{ item.deviceName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.deviceCode
                }}</span></el-option>
            </el-select>
            <el-input disabled v-else v-model="formData.deviceName" placeholder="请输入设备名称" clearable
              :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备编号" prop="deviceCode">
            <el-input disabled v-model="formData.deviceCode" placeholder="请输入设备编号" clearable :style="{ width: '100%' }">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="设备用途" prop="useInfo">
            <el-input v-model="formData.useInfo" placeholder="请输入设备用途" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保管部门" prop="deptId">
            <el-cascader :props="{ value: 'id', checkStrictly: true }" :show-all-levels="false" ref="reference"
              placeholder="请选择保管部门" :style="{ width: '100%' }" v-model="formData.deptId"
              :options="deptOptions"></el-cascader>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="培训人" prop="cultivateUserId">
            <UserDialog placeholder="请选择培训人" @change="changeCultivate" v-model="formData.cultivateUserId"></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="考核人" prop="examineUserId">
            <UserDialog placeholder="请选择考核人" @change="changeExamine" v-model="formData.examineUserId"></UserDialog>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">
        设备授权操作人员
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <el-button type="danger" plain size="mini" @click="handleDele">删行</el-button>
      </h4>
      <el-table :data="formData.contentList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column label="被考核人" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.examinedUserId`"
              :rules="rules.examinedUserId">
              <UserDialog placeholder="请选择被考核人" @change="changeExamined($event, scope.$index)"
                v-model="scope.row.examinedUserId"></UserDialog>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="培训日期" prop="price" width="250" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.cultivateDate`"
              :rules="rules.cultivateDate">
              <el-date-picker v-model="scope.row.cultivateDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择日期" clearable></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="培训结果" prop="spec" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.cultivateResult`"
              :rules="rules.cultivateResult">
              <el-radio-group v-model="scope.row.cultivateResult" size="medium">
                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value.toString()"
                  :disabled="item.disabled">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="考核日期" prop="price" width="250" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.examineDate`" :rules="rules.examineDate">
              <el-date-picker v-model="scope.row.examineDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择日期" clearable></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="考核结果" prop="spec" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.examineResult`"
              :rules="rules.examineResult">
              <el-radio-group v-model="scope.row.examineResult" size="medium">
                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value.toString()"
                  :disabled="item.disabled">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm(1)">提交</el-button>
          <el-button v-if="!($route.query.isInfo || isInfo) && formData.status != 'end'" type="primary"
            @click="submitForm(0)">暂存</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
import { listSelect } from "@/api/device/device.js";
import {
  deviceEmpowerAdd,
  updategdeviceEmpower,
  deviceEmpowerInfo,
} from "@/api/device/deviceEmpower.js";
export default {
  components: {},
  dicts: ["sys_device_sq_content"],
  props: {
    isInfo: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
    btnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      statusOptions: [
        {
          label: "通过",
          value: 1,
        },
        {
          label: "不通过",
          value: 2,
        },
      ],
      formData: {
        contentList: [
          {
            examinedUserId: undefined,
            examinedUserName: undefined,
            cultivateDate: null,
            cultivateResult: "1",
            examineDate: null,
            examineResult: "1",
          },
        ],
        remark: undefined,
        deviceCode: undefined,
        deviceId: undefined,
        useInfo: undefined,
        num: undefined,
        code: undefined,
        cultivateUserId: null,
        statusType: "1",
        deptId: undefined,
        accord: undefined,
        codeRange: undefined,
      },
      deptOptions: [],
      rules: {
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "blur",
          },
        ],
        deviceId: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: "blur",
          },
        ],
        deviceCode: [
          {
            required: true,
            message: "请输入设备编号",
            trigger: "blur",
          },
        ],

        useInfo: [
          {
            required: true,
            message: "请输入设备用途",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "其他说明不能为空",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入出厂编号",
            trigger: "blur",
          },
        ],
        cultivateUserId: [
          {
            required: true,
            message: "请选择培训人",
            trigger: "change",
          },
        ],
        examinedUserId: [
          {
            required: true,
            message: "请选择被考核人",
            trigger: "change",
          },
        ],
        examineDate: [
          {
            required: true,
            message: "请选择考核日期",
            trigger: "change",
          },
        ],
        cultivateDate: [
          {
            required: true,
            message: "请选择培训日期",
            trigger: "change",
          },
        ],
      },

      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    this.$route.query.isInfo = (this.$route.query.isInfo == 'false' || this.$route.query.isInfo == false) ? false : this.$route.query.isInfo
    this.listSelect();
    if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
      this.getinfo();
    }
    this.getDeptTree();
  },
  mounted() { },
  methods: {
    handleAdd() {
      this.formData.contentList.push({
        examinedUserId: undefined,
        examinedUserName: undefined,
        cultivateDate: null,
        cultivateResult: "1",
        examineDate: null,
        examineResult: "1",
      });
    },
    handleDele() {
      if (this.formData.contentList.length == 1) return;
      this.formData.contentList.pop();
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    changeDevice(i) {
      let row = this.deviceOptions.find((e) => e.deviceId == i);
      if (row) {
        this.formData.deviceCode = row.deviceCode;
        this.formData.deviceName = row.deviceName;

        this.formData.code = row.useInfo;
        this.formData.deptId = row.deptId;
        this.formData.deptName = row.deptName;
        this.formData.useInfo = row.useInfo;
      } else {
        this.formData.deviceName = undefined;
        this.formData.deviceCode = undefined;
        this.formData.code = undefined;
        this.formData.deptId = undefined;
        this.formData.deptName = undefined;
      }
    },
    changeExamined(e, i) {
      this.formData.contentList[i].examinedUserName = e.nickName;
    },
    changeExamine(e) {
      this.formData.examineUserName = e.nickName;
    },
    changeCultivate(e) {
      console.log(e);
      this.formData.cultivateUserName = e.nickName;
    },
    listSelect() {
      listSelect({ status: 1, busStatus: -1 }).then((response) => {
        this.deviceOptions = response.data;
      });
    },
    getinfo() {
      return deviceEmpowerInfo(this.$route.query.id || this.id).then(
        (response) => {
          this.formData = response.data;
        }
      );
      console.log(this.content);
    },
    submitForm(e) {
      let query = JSON.parse(JSON.stringify(this.formData));
      if (query.status != 'end') {
        query.status = e == 0 ? 'draft' : 'audit'
      }
      if (e == 0) {
        if (!this.formData.deviceId) {
          this.$message.warning("请先选择设备");
          return;
        }
        if (query.deptId) {
          query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
          query.deptName = this.$refs.reference.getCheckedNodes()[0].label;
        }
        if (this.formData.deviceEmpowerId != undefined) {
          updategdeviceEmpower(query).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.resetForm();
          });
        } else {
          deviceEmpowerAdd(query).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.resetForm();
          });
        }
        return
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {

          if (this.formData.deviceEmpowerId != undefined) {
            updategdeviceEmpower(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            deviceEmpowerAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      this.$tab.closeOpenPage();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
